<!--  -->
<template>
  <div class="container">
    <div class="mask" v-if="flag" @click="$emit('closeDialog')"></div>
    <div :class="['share-order',flag?'show':'']">
      <div class="top flex justify-between aligin-center pt-14">
        <span class="share-icon"></span>
        <span class="ml-6 mr-auto f-14 f-bold">活动记录</span>
        <span class="close" @click="$emit('closeDialog')"></span>
      </div>
      <div class="mt-20 content-wrapper">
        <better-scroll
          :click="true"
          :tap="true"
          :pullup="true"
          :pulldown="true"
          @scrollToEnd="scrollToEnd"
          :data.sync="overdueList"
          :preventDefault="true"
          ref="myScroll"
        >
          <div>
            <template v-for="(item,index) in overdueList">
              <router-link
                tag="div"
                :to="{name:'recordList',params:{id:activityId,issue_id:item.issue_id,key:item.key}}"
                :class="[index==0?'pt-10':'mt-12']"
                class="over-item"
                :key="index"
              >
                <div class="flex aligin-center justify-between">
                  <div class="label-wrapper">
                    <div class="flex">
                      <div class="flex label-item aligin-center">
                        <span class="f-12 f-medium ml-6">期号:</span>
                        <span class="f-14 f-medium mr-auto ml-auto">{{item.issue_id}}</span>
                      </div>
                      <div class="flex label-item justify-between aligin-center">
                        <span class="f-12 f-medium ml-6 mr-auto">幸运号:</span>
                        <span class="f-14 f-medium color-red">{{item.luck_number}}</span>
                      </div>
                    </div>
                    <div class="flex mt-14">
                      <div class="flex label-item aligin-center">
                        <span class="f-12 f-medium ml-6">幸运者:</span>
                        <span
                          class="f-12 f-medium mr-auto ml-auto ellipsis w-100"
                        >{{item.nick_name}}</span>
                      </div>
                      <div class="flex label-item justify-between aligin-center">
                        <span class="f-12 f-medium ml-6 mr-auto">揭晓:</span>
                        <span class="f-10 color-gray f-medium">{{item.open_time}}</span>
                      </div>
                    </div>
                  </div>
                  <span class="arrow-right"></span>
                </div>
              </router-link>
            </template>
            <div class="no-data" v-if="overdueList.length==0"></div>
          </div>
        </better-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { activityHistories } from "../api/api";
import  BetterScroll  from '../components/Scroll'
import page from "../mixin/page"
export default {
  mixins:[page],
  components: { BetterScroll },
  props: {
    flag: {
      type: Boolean,
      default: () => {
        return false
      },
      required: true
    },
    activityId: {
      type: Number,
      default: () => {
        return 0
      },
      required: true
    },
    shopId: {
      type: Number,
      default: () => {
        return 29
      }
    }
  },

  data() {
    return {
      overdueList:[]
    }
  },
  computed: {},
  watch: {},
  methods: {
    open() {
      document.body.classList.add('z-overflow-hidden')
    },
    close() {
      document.body.classList.remove('z-overflow-hidden')
    },
     reset() {
      this.current_page = 0;
      this.last_page = 1;
      this.overdueList = [];
      this.loading = false;
      this.$emit("closeDialog");
    },
    request() {
      this._api();
    },
    _api() {
      activityHistories({
        page: this.current_page + 1,
        id: this.activityId
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.overdueList = [...this.overdueList, ...result];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {},
  updated() {
    if (this.flag) {
      this.open()
    } else {
      this.close()
    }
  }, //生命周期 - 更新之后
  beforeDestroy(){
    this.close()
  },
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
@import url('../assets/style/mixin'); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.4;
  z-index: 30;
}
.share-order {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 14px;
  width: 100%;
  height: 0;
  box-sizing: border-box;
  z-index: 320;
  background: #fff;
  transition: all 0.3s ease;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .share-icon {
    width: 24px;
    height: 24px;
    .bg-image('../../assets/imgs/reword-rule');
    background-size: 100% 100%;
  }
  .close {
    height: 16px;
    width: 16px;
    .bg-image('../../assets/imgs/close-dialog');
    background-size: 100% 100%;
  }
}
.show {
  height: 543px;
}
.content-wrapper {
  height: 480px;
  overflow: hidden;
}
.customer {
  padding: 10px 0 6px;
  height: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #f0474f;
  transition: all 0.3s ease;
  z-index: 999;
  .consultation {
    margin: 0 auto;
    width: 110px;
    height: 28px;
    background: rgba(240, 71, 79, 1);
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
  }
  .tip-text {
    margin-top: 9px;
    font-size: 12px;
    color: rgba(240, 71, 79, 1);
    text-align: center;
  }
}
.customer-show {
  height: 64px;
}
.label-wrapper {
  width: 95%;
  .label-item {
    width: 50%;
  }
}
.arrow-right {
  width: 14px;
  height: 14px;
  background: url("../assets/imgs/arrow-right-b@2x.png");
  background-size: 100% 100%;
}
.over-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(248, 248, 248, 1);
}
.w-100 {
  max-width: 100px;
  height: 16px;
  line-height: 16px;
}
</style>